<template>
    <div id="ywwtRing">
        <low-chart :title="title">
            <div id="ring_box"></div>
        </low-chart>
    </div>

</template>

<script>
    import echarts from 'echarts'
    import lowChart from 'components/content/lowChart/lowChart'

    import {getOrderCount} from "../../../network/home";
    export default {
        name: "ywwtRing",
        data() {
            return {
                timer:null
            }
        },
        props: {
            title: {
                type: String,
                default: "统计类目"
            }
        },
        components: {
            lowChart
        },
        mounted() {
            this.setEchart();
            this.timer = setInterval(() => {
                this.setEchart();
            },30000);
        },
        beforeDestroy() {
            if(this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('右上关闭')
            }
        },
        methods: {
            setEchart() {
                getOrderCount().then(res => {
                    if(res.code=='200'){
                        // console.log(res.data)
                        let myChart = echarts.init(document.getElementById("ring_box"));
                        var dataStyle = {
                            normal: {
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                shadowBlur: 0,
                                shadowColor: '#00F5FF'
                            }
                        };
                        myChart.setOption({
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '10%',
                                // containLabel: true
                            },
                            color:['#11E5B3','#E87C25','#60C0DD','#D7504B','#B5C334'],
                            legend: {
                                // show:false,
                                bottom: 45,
                                itemGap:30,
                                left: "center",
                                selectedMode: false,
                                // icon: "none",
                                textStyle: {
                                    color: ['#11E5B3','#E87C25','#60C0DD','#D7504B','#B5C334'],
                                    fontSize: 19
                                },
                                data: res.data.name
                            },
                            series: [{
                                name: res.data.dataList[0].name,
                                type: 'pie',
                                // clockWise: false,
                                radius: [45, 55],
                                // hoverAnimation: true,
                                itemStyle: dataStyle,
                                center: ['12%', '40%'],
                                data: [{
                                    value: res.data.dataList[0].value,
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#11E5B3',
                                                    align: 'center',
                                                    fontSize: 30,
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#11E5B3',
                                                    align: 'center',
                                                    fontSize: 16
                                                }
                                            },
                                            formatter: function (params) {
                                                // return "\n\n{a|" +  res.data.dataList[0].num + "}" + "\n\n{b|"+res.data.dataList[0].name+""+params.value+"%}";
                                                return "\n\n{a|" +  res.data.dataList[0].num + "}" + "\n\n{b|"+params.value+"%}";
                                            },
                                            position: 'center',
                                            show: true,
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#11E5B3',
                                            shadowColor: '#35607C',
                                            shadowBlur: 0
                                        }
                                    }
                                }, {
                                    value: res.data.dataList[0].value2,
                                    name: res.data.dataList[0].name,
                                    itemStyle: {
                                        normal: {
                                            color: '#24375c'
                                        },
                                        emphasis: {
                                            color: '#24375c'
                                        }
                                    }
                                }]
                            }, {
                                name: res.data.dataList[1].name,
                                type: 'pie',
                                // clockWise: false,
                                radius: [45, 55],
                                itemStyle: dataStyle,
                                hoverAnimation: true,
                                center: ['31%', '40%'],
                                data: [{
                                    value: res.data.dataList[1].value,
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#E87C25',
                                                    align: 'center',
                                                    fontSize: 30,
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#E87C25',
                                                    align: 'center',
                                                    fontSize: 16
                                                }
                                            },
                                            formatter: function (params) {
                                                return "\n\n{a|" +  res.data.dataList[1].num + "}" + "\n\n{b|"+params.value+"%}";
                                            },
                                            position: 'center',
                                            show: true,
                                            textStyle: {
                                                fontSize: '14',
                                                fontWeight: 'normal',
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#E87C25',
                                        }
                                    }
                                }, {
                                    value: res.data.dataList[1].value2,
                                    name: res.data.dataList[1].name,
                                    itemStyle: {
                                        normal: {
                                            color: '#412a4e'
                                        },
                                        emphasis: {
                                            color: '#412a4e'
                                        }
                                    }
                                }]
                            }, {
                                name: res.data.dataList[2].name,
                                type: 'pie',
                                // clockWise: false,
                                radius: [45, 55],
                                itemStyle: dataStyle,
                                hoverAnimation: true,
                                center: ['50%', '40%'],
                                data: [{
                                    value: res.data.dataList[2].value,
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#60C0DD',
                                                    align: 'center',
                                                    fontSize: 30,
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#60C0DD',
                                                    align: 'center',
                                                    fontSize: 16
                                                }
                                            },
                                            formatter: function (params) {
                                                return "\n\n{a|" +  res.data.dataList[2].num + "}" + "\n\n{b|"+params.value+"%}";
                                            },
                                            position: 'center',
                                            show: true,
                                            textStyle: {
                                                fontSize: '14',
                                                fontWeight: 'normal',
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#60C0DD',
                                            shadowColor: '#613fd1',
                                            shadowBlur: 0
                                        }
                                    }
                                }, {
                                    value: res.data.dataList[2].value2,
                                    name: res.data.dataList[2].name,
                                    itemStyle: {
                                        normal: {
                                            color: '#453284'
                                        },
                                        emphasis: {
                                            color: '#453284'
                                        }
                                    }
                                }]
                            }, {
                                name: res.data.dataList[3].name,
                                type: 'pie',
                                // clockWise: false,
                                radius: [45, 55],
                                itemStyle: dataStyle,
                                hoverAnimation: true,
                                center: ['69%', '40%'],
                                data: [{
                                    value: res.data.dataList[3].value,
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#D7504B',
                                                    align: 'center',
                                                    fontSize: 30,
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#D7504B',
                                                    align: 'center',
                                                    fontSize: 16
                                                }
                                            },
                                            formatter: function (params) {
                                                return "\n\n{a|" +  res.data.dataList[3].num + "}" + "\n\n{b|"+params.value+"%}";
                                            },
                                            position: 'center',
                                            show: true,
                                            textStyle: {
                                                fontSize: '14',
                                                fontWeight: 'normal',
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#D7504B',
                                            shadowColor: '#613fd1',
                                            shadowBlur: 0
                                        }
                                    }
                                }, {
                                    value: res.data.dataList[3].value2,
                                    name: res.data.dataList[3].name,
                                    itemStyle: {
                                        normal: {
                                            color: '#453284'
                                        },
                                        emphasis: {
                                            color: '#453284'
                                        }
                                    }
                                }]
                            }, {
                                name: res.data.dataList[4].name,
                                type: 'pie',
                                // clockWise: false,
                                radius: [45, 55],
                                itemStyle: dataStyle,
                                hoverAnimation: true,
                                center: ['89%', '40%'],
                                data: [{
                                    value: res.data.dataList[4].value,
                                    label: {
                                        normal: {
                                            rich: {
                                                a: {
                                                    color: '#B5C334',
                                                    align: 'center',
                                                    fontSize: 30,
                                                    fontWeight: "bold"
                                                },
                                                b: {
                                                    color: '#B5C334',
                                                    align: 'center',
                                                    fontSize: 16
                                                }
                                            },
                                            formatter: function (params) {
                                                return "\n\n{a|" +  res.data.dataList[4].num + "}" + "\n\n{b|"+params.value+"%}";
                                            },
                                            position: 'center',
                                            show: true,
                                            textStyle: {
                                                fontSize: '14',
                                                fontWeight: 'normal',
                                                color: '#fff'
                                            }
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: '#B5C334',
                                            shadowColor: '#613fd1',
                                            shadowBlur: 0
                                        }
                                    }
                                }, {
                                    value: res.data.dataList[4].value2,
                                    name: res.data.dataList[4].name,
                                    itemStyle: {
                                        normal: {
                                            color: '#453284'
                                        },
                                        emphasis: {
                                            color: '#453284'
                                        }
                                    }
                                }]
                            }]

                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
    #ring_box {
        width: 609px;
        height: 277px;
    }
</style>
